<template>
  <div class="header-container">
    <el-row type="flex"
            justify="space-between"
            style="height:54px">
      <el-col :span="15"
              style="text-align:left;height:100%">
        <div class="left-flex">
          <slot></slot>
        </div>
      </el-col>
      <el-col>
        <el-row type="flex"
                justify="end"
                class="title">
          <div>
            <span class="m-r time" @click="screen" v-show="fullscreen"><i class="el-icon-switch-button"></i>退出</span>
            <span class="m-r time" @click="screen" v-show="!fullscreen"><i class="el-icon-full-screen"></i>全屏</span>
          </div>
          <div>
            <span class="m-r time">{{ time }}</span>
          </div>
          <span>{{ userInfo.name }}</span>
          <!-- <img :src="logoUrl" /> -->
        </el-row>
      </el-col>
    </el-row>
    <!-- <edit-password
      :showDialog="editPasseordDialog"
      @changeVisible="editPasswordDialogFun"
      @logout="logout"
    ></edit-password>-->
  </div>
</template>

<script>
import { getNowTime } from "@/utils/time";
import EditPassword from "../views/person/resetPwd";
import UserInfo from "@/views/person/index";
import CarouselManage from "@/views/carouselManage/index";
export default {
  name: "Header",
  components: {
    EditPassword,
    UserInfo,
    CarouselManage
  },
  data() {
    return {
      userInfo: {},
      fullscreen: false,
      time: "",
      editPasseordDialog: false,
      userInfoDialog: false,
      carouselDialog: false
    };
  },
  mounted() {
    this.userInfo = this.$store.state.user.userInfo;
    this.time = getNowTime();
    setInterval(() => {
      this.time = getNowTime();
    }, 1000);
    let that = this;
    this.fullscreen = that.checkFull();
    window.onresize = function() {
      if (!that.checkFull()) {
        // 退出全屏后要执行的动作
        that.fullscreen = false;
      }
    };
  },
  beforeUnmount() {
    window.onresize = null;
  },
  methods: {
    handleClick(e) {
      if (e == "userInfo") {
        this.userInfoDialog = true;
      } else if (e == "editPassword") {
        this.editPasseordDialog = true;
      } else if (e == "uploadImg") {
        this.carouselDialog = true;
      }
    },
    logout() {
      this.$store.dispatch("user/logoutAct");
      this.$router.replace("/login");
    },
    editPasswordDialogFun(e) {
      this.editPasseordDialog = e;
    },
    editUserInfoDialogFun(e) {
      this.userInfoDialog = e;
    },
    carouselDialogFun(e) {
      this.carouselDialog = e;
    },
    checkFull() {
      //判断浏览器是否处于全屏状态 （需要考虑兼容问题）
      //火狐浏览器
      var isFull =
        document.mozFullScreen ||
        document.fullScreen ||
        //谷歌浏览器及Webkit内核浏览器
        document.webkitIsFullScreen ||
        document.webkitRequestFullScreen ||
        document.mozRequestFullScreen ||
        document.msFullscreenEnabled;
      if (isFull === undefined) {
        isFull = false;
      }
      return isFull;
    },
    screen() {
      let element = document.documentElement;
      if (this.fullscreen) {
        if (document.exitFullscreen) {
          document.exitFullscreen();
        } else if (document.webkitCancelFullScreen) {
          document.webkitCancelFullScreen();
        } else if (document.mozCancelFullScreen) {
          document.mozCancelFullScreen();
        } else if (document.msExitFullscreen) {
          document.msExitFullscreen();
        }
      } else {
        if (element.requestFullscreen) {
          element.requestFullscreen();
        } else if (element.webkitRequestFullScreen) {
          element.webkitRequestFullScreen();
        } else if (element.mozRequestFullScreen) {
          element.mozRequestFullScreen();
        } else if (element.msRequestFullscreen) {
          // IE11

          element.msRequestFullscreen();
        }
      }

      this.fullscreen = !this.fullscreen;
    }
  }
};
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style scoped lang="scss">
.header-container {
  background-color: white;
  padding: 0 15px;
  height: 54px;
  .home-title {
    font-size: 18px;
    font-weight: bold;
    color: #212121;
  }
  .left-flex {
    display: flex;
    align-items: center;
    align-content: center;
    height: 54px;
    .name {
      margin-right: 10px;
    }
  }
  .title {
    font-size: 14px;
    color: #707070;
    line-height: 54px;
    opacity: 1;
    align-items: center;
    box-sizing: border-box;
    img {
      height: 26px;
    }
    :first-child {
      margin-right: 10px;
    }
  }
}
</style>
